// useState 实现一个计数器按钮
import { useState } from "react";

// 导入样式文件
import './app.css'

function App() {
  // 1. 调用useState添加一个状态变量
  // count: 状态变量
  // setCount: 修改状态变量的方法
  let [count, setCount] = useState(0);

  
  // 2. 点击事件回调
  const handleClick = () => {
    /**
     * 作用:
     *  1. 用传入的新值修改 count
     *  2. 重新使用新的 count 渲染 UI
     */
    setCount(count + 1);

    // 直接修改  无法引发视图更新
    // count++
    // console.log(count);
  };

  // 复杂对象的修改
  let [form, setForm] = useState({name: "jack"});

  const handleClickObj = () => {
    // 错误的写法: 直接修改
    // form.name = 'jack 修改后'

    // 正确的写法:
    setForm({...form, name:'jack 修改后'})

    // 语法--展开运算符(js 语法使用)
    let obj = {name: 'wg', age: 18}
    console.log({...obj,age: 33});
  }

  // 行内样式--写法2.1
  const styleTwo = {fontSize:"50px", color:"red"}
  return (
    <div className="App">
      <button onClick={handleClick} style={{ width: "100px", height: "100px", fontSize: "30px" }}>
        {count}
      </button>
      <hr></hr>
      {/* 复杂对象修改视图 */}
      <button onClick={handleClickObj} style={{ width: "100px", height: "100px" }}>
        {form.name}
      </button>


      {/* 行内样式控制--写法1 */}
      <span style={{fontSize:"50px", color:"red"}}>this is span row style</span>

      {/* 行内样式控制--写法2.2 */}
      <button style={styleTwo}>this is span row style Two</button>

      <hr/>
      {/* 通过class 类名控制 */}
      <button className="foo">我是类名控制的 Button</button>
    </div>
  );
}

export default App;
